@tailwind base;

@tailwind components;

.distributed {
  @apply my-8 flex justify-around items-start;
}

.example,
.example-home {
  @apply -mx-4 my-4 p-8 flex flex-col items-center justify-center bg-gray-100 border-t border-b;
  &.is-dark {
    @apply bg-gray-800;
  }
}

input[type='text'] {
  @apply w-full shadow appearance-none border rounded py-2 px-3 text-gray-700;
}

.homepage .home {
  max-width: initial;
  padding: 3.6rem 0 2rem 0;
}

.site-name {
  @apply text-indigo-700 !important;
}

.site-name:hover {
  @apply text-indigo-500 !important;
}

.homepage .hero {
  @apply px-4;
}
.homepage .hero img {
  max-height: 190px !important;
}

.homepage .content {
  & div[class*='language-'] {
    @apply max-w-md mx-auto;
  }
}

.homepage .hero .action-button {
  @apply px-6 py-2 !important;
}

.section {
  @apply my-10;
}

h1,
.h1 {
  @apply text-3xl text-gray-800 p-0 mt-0 mb-4 !important;
}

h2,
.h2 {
  @apply text-2xl text-gray-800 border-none mb-4;
}

h3,
.h3 {
  @apply text-lg text-gray-700 font-medium tracking-wide mb-3;
}

h4,
.h4 {
  @apply text-gray-700 font-semibold tracking-wide p-0 mt-3 mb-2;
}

h1,
h2,
h3,
h4 {
  padding-top: 64px;
  margin-top: -64px;
}

a {
  @apply text-indigo-700 no-underline;
  &:hover {
    @apply text-indigo-600;
  }
}

ul {
  @apply list-disc;
}

/* ul li {
  @apply space-y-4;
} */

ol {
  @apply list-decimal;
}

p {
  @apply my-2 leading-relaxed;
}

* {
  border-radius: 0;
}

@tailwind utilities;
